<template>
  <div class="query_condition">
    <el-form :inline="true" :model="form">
      <el-form-item size="mini" label="类型" class="type-css">
        <el-select v-model="form.siteType" placeholder="请选择类型" clearable>
          <el-option
            v-for="item in stations"
            :key="item.value"
            :value="item.value"
            :label="item.name"
          />
        </el-select>
      </el-form-item>

      <el-form-item size="mini" label="站名" v-if="form.siteType == 1">
        <el-autocomplete
          ref="autoComplete"
          v-model="form.staName"
          :fetch-suggestions="querySearchAsync"
          placeholder="请输入内容"
          @select="handleSelect"
          class="kz"
          clearable
        />
      </el-form-item>
      <el-form-item
        size="mini"
        label="区域"
        v-if="form.siteType != 1 && form.siteType"
      >
        <el-cascader
          v-model="value"
          :options="areas"
          :props="props"
          size="mini"
          clearable
          @change="regionhandleChange"
        >
        </el-cascader>
      </el-form-item>
      <el-form-item size="mini" label="日期">
        <div class="block">
          <el-date-picker
            v-model="form.value"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            @change="timeQuantum"
          ></el-date-picker>
        </div>
      </el-form-item>

      <el-form-item>
        <el-button class="newButtonColor SearchBTN" size="mini" @click="chaxun"
          >查询</el-button
        >
        <el-button size="mini" @click="res" class="otherBTN SearchBTN"
          >清空</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<style lang="scss" scoped>
.query_condition {
  padding: 18px 18px 5px 18px;
}
.type-css {
  margin-left: -23px;
}
/deep/ .el-input__inner {
  height: 30px !important;
}
</style>
<script>
import { DICTDATA, getDict } from "../../../../api/dict";
import { getStationList } from "@/api/property/charge";
export default {
  props: {
    queryParam: this.form,
  },
  data() {
    return {
      value: [],
      params: {},
      form: {
        siteType: 1,
      },
      node: {
        name: "",
        value: "",
      },
      props: {
        label: "name",
        children: "children",
        checkStrictly: true,
        value: "id",
      },
      stations: [],
      areas: JSON.parse(localStorage.getItem("regTree")),
    };
  },
  created() {
    //获取类型
    getDict(DICTDATA.STATION_TYPE_S).then((res) => {
      this.stations = res;
    });
    const id = JSON.parse(sessionStorage.getItem("orgId"));
  },
  methods: {
    querySearchAsync(queryString, cb) {
      if (queryString !== "") {
        this.params.staName = queryString;
        getStationList(this.params).then((res) => {
          for (let i of res.data) {
            i.value = i.staName; //将想要展示的数据作为value
          }
          let restaurants = res.data;
          cb(restaurants);
        });
      }
    },
    handleSelect(item) {
      this.form.siteId = item.id;
    },
    // 多级联动选择器选中事件
    regionhandleChange(value) {
      this.form.regId = value[value.length - 1];
    },
    //地区数据查询，翻译使用
    queryRegTree(id) {
      return new Promise((resolve, reject) => {
        getAreas(id).then((res) => {
          this.areas = this.getTreeData(res.data.children);
          resolve();
        });
      });
    },
    // 递归算法
    getTreeData(data) {
      for (let i = 0; i < data.length; i++) {
        if (data[i].children === null) {
          // children若为空数组，则将children设为undefined
          data[i].children = undefined;
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].children);
        }
      }
      return data;
    },
    res() {
      this.form = {};
    },
    chaxun() {
      this.$parent.queryParam = this.form;
      let this_ = this;
      setTimeout(function () {
        this_.$parent.getDataInit();
      }, 100);
    },
    //时间赋值
    timeQuantum(e) {
      this.form.startDate = e[0];
      this.form.endDate = e[1];
    },
  },
};
</script>
